<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li class="active">1</li>
        <li class="active">2</li>
        <li class="active">3</li>
        <span>4</span>
    </ul>
    <button>按钮</button>
    <script>
        // 事件委托 ：1.性能比较好  2.不会受到动态元素的影响
        // 把子元素的事件委托给父元素执行 ；

        // 非事件委托的办法
        // var liEles = document.querySelectorAll("li");
        // liEles.forEach(function(li){
        //     li.onclick = function(){
        //         console.log(1111);
        //     }
        // })


// 事件委托的方式 :把li的事件 委托给父级ul上；
// 一、性能好：1.事件只绑定一次 2.没有循环操作
// var ulEle = document.querySelector("ul");
// ulEle.onclick = function(e){
//     // console.log("点击了");
//     var e = e || window.event;
//     var target = e.target || e.srcElement;
//     // console.log(target.nodeName);
//     // if(target.nodeName=="LI"){
//     //     console.log("点击了li元素");
//     // }

//     if(target.className=="active"){
//         console.log("点击了li元素");
//     }
// }


// 二、不会受到动态元素的影响
var lis = document.querySelectorAll("li");
var ulELe = document.querySelector("ul");
var btnEle = document.querySelector("button");

// 普通的写法 
// lis.forEach(function(li){
//     li.onclick = function(){
//         console.log("点击了li");
//     }
// })

// 事件委托的写法；事件绑定和子元素的li没有关系，只 和 父级的ul事件有关系；
ulELe.onclick = function(e){
    var target = e.target || e.srcElement;
    if(target.nodeName=="LI"){
        console.log("点击了");
    }
}


btnEle.onclick = function(){
    var liEle = document.createElement("li");
    liEle.innerHTML = "123";
    
    ulELe.appendChild(liEle)
}


// 总结：事件委托：把子元素事件委托给父元素 
// 1.性能好 2.动态元素不会受到影响
// 使用条件 ： 子元素比较多 嵌套层级不是特别复杂；
    </script>
</body>
</html>